<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="24" style="margin-left: 90%">
          <el-button type="primary" style="font-size: 35px" @click="addCases">新增病历</el-button>
        </el-col>
        <el-col :span="8">
          <template>
            <div>
              <div v-for="(row, index) in chunk(casesList, 1)" :key="index" style="display: flex">
                <el-card v-for="item in row" :key="item.id" style="width: 100%">
                  <p>接诊时间: {{ formatTime(item.createTime) }}</p>
                  <p>门诊单号: {{ item.id }}</p>
                  <p>诊断: {{ item.cDiagnose }}</p>
                  <p>科室: {{ item.sDepar }}</p>
                  <p>接诊医生: {{ item.sName }}</p>
                  <el-button @click="changeCaseData(item)">查看病历</el-button>
                </el-card>
              </div>
            </div>
          </template>
          <el-table
            :data="casesList"
            stripe
            v-if="false"
            style="width: 100%">
            <el-table-column
              prop="createTime"
              label="接诊时间"
            >
              <template slot-scope="scope">
                {{ formatTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="门诊编号"
              >
            </el-table-column>
            <el-table-column
              prop="cDiagnose"
              label="诊断"
              >
            </el-table-column>
            <el-table-column
              prop="sDepar"
              label="接诊科室">
            </el-table-column>
            <el-table-column
              prop="sName"
              label="医生">
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button @click="changeCaseData(scope.row)">查看病历</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16" v-if="this.message">
          <el-descriptions title="体格信息" direction="vertical" :column="4" border>
            <el-descriptions-item label="体温">{{ casesData.cTemperature }} °C</el-descriptions-item>
            <el-descriptions-item label="呼吸">{{ casesData.cBreathe }} 次/分</el-descriptions-item>
            <el-descriptions-item label="脉搏" :span="2">{{ casesData.cPulse }} 次/分</el-descriptions-item>
            <el-descriptions-item label="血压" :span="2">{{ casesData.cBloodPressure }} mmgH</el-descriptions-item>
            <el-descriptions-item label="血糖" :span="2">{{ casesData.cBloodSugar }} mmol/L</el-descriptions-item>
            <el-descriptions-item label="血脂" :span="2">{{ casesData.cBloodFat }} mmol/L</el-descriptions-item>
            <el-descriptions-item label="身高" :span="2">{{ casesData.cHeight }} cm</el-descriptions-item>
            <el-descriptions-item label="体重" :span="2">{{ casesData.cWeight }} kg</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="病历信息" direction="vertical" :column="4" border>
            <el-descriptions-item label="发病日期">{{ formatTime(casesData.cStartDate) }}</el-descriptions-item>
            <el-descriptions-item label="主诉">{{ casesData.cAction }}</el-descriptions-item>
            <el-descriptions-item label="现病史">{{ casesData.cNewCase }}</el-descriptions-item>
            <el-descriptions-item label="既往史">{{ casesData.cBeforeCase }}</el-descriptions-item>
            <el-descriptions-item label="过敏史">{{ casesData.cAllergy }}</el-descriptions-item>
            <el-descriptions-item label="个人史">{{ casesData.cPersonal }}</el-descriptions-item>
            <el-descriptions-item label="家族史">{{ casesData.cFamily }}</el-descriptions-item>
            <el-descriptions-item label="辅助检查">{{ casesData.cAuxiliary }}</el-descriptions-item>
            <el-descriptions-item label="初步诊断">{{ casesData.cDiagnose }}</el-descriptions-item>
            <el-descriptions-item label="治疗意见">{{ casesData.cOpinion }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ casesData.cNotes }}</el-descriptions-item>
            <el-descriptions-item label="医嘱">
              <el-tag size="small">{{ casesData.cAdvice }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { listCases, getCases, delCases, addCases, updateCases } from "@/api/drugs/cases";

export default {
  components: {},
  props: [],
  data() {
    return {
      message:false,
      casesData:{
        id: null,
        pId: null,
        cType: null,
        cDiagnose: null,
        cAdvice: null,
        cTemperature: null,
        cBreathe: null,
        cPulse: null,
        cBloodPressure: null,
        cHeight: null,
        cWeight: null,
        cBloodSugar: null,
        cBloodFat: null,
        cStartDate: null,
        cAction: null,
        cNewCase: null,
        cBeforeCase: null,
        cAllergy: null,
        cPersonal: null,
        cFamily: null,
        cAuxiliary: null,
        cOpinion: null,
        cNotes: null,
        cStaffId: null
      },
      formData: {},
      rules: {},
      casesList:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pId: null,
        cType: null,
        cDiagnose: null,
        cAdvice: null,
        cTemperature: null,
        cBreathe: null,
        cPulse: null,
        cBloodPressure: null,
        cHeight: null,
        cWeight: null,
        cBloodSugar: null,
        cBloodFat: null,
        cStartDate: null,
        cAction: null,
        cNewCase: null,
        cBeforeCase: null,
        cAllergy: null,
        cPersonal: null,
        cFamily: null,
        cAuxiliary: null,
        cOpinion: null,
        cNotes: null,
        cStaffId: null,
        createTime:null
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCaseInfo();
  },
  methods: {
    chunk(arr, size) {
      const chunkedArr = [];
      let index = 0;
      while (index < arr.length) {
        chunkedArr.push(arr.slice(index, size + index));
        index += size;
      }
      return chunkedArr;
    },
    formatTime(time) {
      return time.substring(0, 19).replace('T', ' ')
    },
    addCases(){
      this.$router.push({
        path: '/drugs/d3',
        query: {
          id: this.$route.query.id
        }
      })
    },
    changeCaseData(row){
      this.message=true
      this.casesData=row
      console.log(this.casesData)
    },
    getCaseInfo(){
      this.queryParams.pId=this.$route.query.id;
      listCases(this.queryParams).then(response => {
        this.casesList = response.rows;
        this.total = response.total;
        console.log(this.casesList)
      });
    },
  }
}

</script>
<style>
</style>
